<template>
  <div class="common-layout" v-if="isDev">
    <BaseHeader></BaseHeader>
    <el-container>
      <BaseMenus></BaseMenus>
      <el-main>
        <contentHeader></contentHeader>
        <el-scrollbar>
          <router-view v-slot="{ Component, route }">
            <transition :name="(route.meta.transitionName as string)">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
  <router-view v-else > </router-view>
</template>
<script setup lang="ts">
 import BaseHeader from './BaseHeader.vue'
 import BaseMenus from './BaseMenus.vue'
 import contentHeader from '@/components/content-header.vue'
 const isDev=import.meta.env.VITE_USER_NODE_ENV === 'development'
</script>
<style lang="scss" scoped>
.common-layout {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-container {
    flex: 1;
    height: 0;
  }
  .el-main {
    background-color: #f5f5f5;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
}
</style>
